{% extends "layout/base.html" %}

{% block title %}
    菜单管理
{% endblock %}

{% block head %}
    {{ super() }}
{% endblock %}

{% block bread %}
    {{ self.title() }}
{% endblock %}

{% block content %}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="分类名" name="name" lay-verify="required">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('添加菜单','/admin/menu/add/0', 600, 600)"><i
                            class="layui-icon"></i>增加
                    </button>
                </div>
                <div class="layui-card-body" style="display:none;" id="table">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th width="10">ID</th>
                            <th>菜单名称</th>
                            <th width="200px">菜单路径</th>
                            <th width="30">菜单类型</th>
                            <th width="50">排序</th>
                            <th width="80">状态</th>
                            <th width="250">操作</th>
                        </thead>

                        <tbody class="x-cate">
                        {% for menu in menus %}
                            <tr cate-id="{{ menu.id }}" fid="{{ menu.parent_id }}">
                                <td>{{ menu.id }}</td>
                                <td>
                                    {% if menu.type == 0 %} <i class="layui-icon x-show" status='true'>&#xe623;</i> {% endif %}
                                    {% if menu.type == 1 %} &nbsp;&nbsp;&nbsp;&nbsp; <i class="layui-icon x-show" status='true'>&#xe623;</i> {% endif %}
                                    {% if menu.type == 2 %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ {% endif %}
                                    {{ menu.name }}
                                </td>
                                <td>{{ menu.url or '' }}</td>
                                <td>
                                    {% if menu.type == 0 %}
                                        <span class="layui-btn td-status layui-btn-radius layui-btn-mini layui-btn-primary">目录</span>
                                    {% elif menu.type == 1 %}
                                        <span class="layui-btn td-status layui-btn-radius layui-btn-mini">菜单</span>
                                    {% else %}
                                        <span class="layui-btn td-status layui-btn-radius layui-btn-mini layui-btn-normal">按钮</span>
                                    {% endif %}
                                </td>
                                <td><input type="text" class="layui-input x-sort" name="order"
                                           value="{{ menu.order or '' }}"></td>
                                <td>
                                    <input type="checkbox" lay-data="{{ menu.id or '' }}" name="switch" lay-text="开启|停用"
                                            {% if menu and menu.status == 1 %} checked {% endif %} lay-skin="switch"
                                           lay-filter="status">
                                </td>

                                <td class="td-manage">
                                    <button class="layui-btn layui-btn layui-btn-xs"
                                            onclick="xadmin.open('编辑','/admin/menu/edit/{{ menu.id }}', 600, 600)">
                                        <i class="layui-icon">&#xe642;</i>编辑
                                    </button>
                                    <button class="layui-btn layui-btn-warm layui-btn-xs"
                                            onclick="xadmin.open('添加【{{ menu.name }}】子菜单','/admin/menu/add/{{ menu.id }}', 600, 600)">
                                        <i class="layui-icon">&#xe642;</i>添加子栏目
                                    </button>
                                    <button class="layui-btn-danger layui-btn layui-btn-xs item_delete" lay-data="{{ menu.id }}">
                                        <i class="layui-icon">&#xe640;</i>删除
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div id="page"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
<script>
    layui.config({
        base: "/static/js/"
    }).use(['form', 'table', 'laypage', 'common'], function () {
        var $ = layui.jquery;
        var form = layui.form,
            table = layui.table,
            laypage = layui.laypage,
            common = layui.common;


        $('#table').show();
        //完整功能
        laypage.render({
            elem: 'page'
            , count: {{ count }}
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj) {
                //console.log(obj)
            }
        });

        //监听开关
        form.on('switch(status)', function () {
            var id = $(this).attr("lay-data");
            var status = 0;
            if (this.checked) {
                status = 1;
            }
            //发异步，把数据提交
            var url = "/admin/menu/change/" + id;
            var data = {'status': status};
            common.ajaxJsonCms('post', 'false', url, JSON.stringify(data));
        });

        $(".item_delete").click(function () {
            //删除
            var id = $(this).attr("lay-data");
            var url = "/admin/menu/del/" + id;
            common.ajaxCmsConfirm('系统提示', '确认删除菜单?', url, null);
        });

        /*用户-删除*/
        function del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
            });
        }

        // 分类展开收起的分类的逻辑
        $(function () {
            $("tbody.x-cate tr[fid!='0']").hide();
            // 栏目多级显示效果
            $('.x-show').click(function () {
                if ($(this).attr('status') == 'true') {
                    $(this).html('&#xe625;');
                    $(this).attr('status', 'false');
                    cateId = $(this).parents('tr').attr('cate-id');
                    $("tbody tr[fid=" + cateId + "]").show();
                } else {
                    cateIds = [];
                    $(this).html('&#xe623;');
                    $(this).attr('status', 'true');
                    cateId = $(this).parents('tr').attr('cate-id');
                    getCateId(cateId);
                    console.log(cateIds);
                    for (var i in cateIds) {
                        $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
                    }
                }
            })
        });

        var cateIds = [];
        function getCateId(cateId) {
            $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
                id = $(el).attr('cate-id');
                cateIds.push(id);
                getCateId(id);
            });
        }
    });
</script>
{% endblock %}

